<script setup lang="ts">
import { ChevronRight, Plus, Edit, Trash2, Building2 } from 'lucide-vue-next';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';
import type { DepartmentWithChildren } from '@/api/endpoints/system/department';

interface Props {
  department: DepartmentWithChildren;
  level?: number;
  isSelected?: boolean;
  isExpanded?: boolean;
}

interface Emits {
  select: [department: DepartmentWithChildren];
  create: [parentDepartment: DepartmentWithChildren];
  edit: [department: DepartmentWithChildren];
  delete: [department: DepartmentWithChildren];
  toggle: [departmentId: string, expanded: boolean];
}

const props = withDefaults(defineProps<Props>(), {
  level: 0,
  isSelected: false,
  isExpanded: false,
});

const emit = defineEmits<Emits>();

const hasChildren = computed(() =>
  props.department.children && props.department.children.length > 0,
);

function handleSelect() {
  emit('select', props.department);
}

function handleCreate() {
  emit('create', props.department);
}

function handleEdit() {
  emit('edit', props.department);
}

function handleDelete() {
  emit('delete', props.department);
}

function handleToggle(expanded: boolean) {
  emit('toggle', props.department.id!, expanded);
}

function handleChildSelect(department: DepartmentWithChildren) {
  emit('select', department);
}

function handleChildCreate(parentDepartment: DepartmentWithChildren) {
  emit('create', parentDepartment);
}

function handleChildEdit(department: DepartmentWithChildren) {
  emit('edit', department);
}

function handleChildDelete(department: DepartmentWithChildren) {
  emit('delete', department);
}

function handleChildToggle(departmentId: string, expanded: boolean) {
  emit('toggle', departmentId, expanded);
}
</script>

<template>
  <div class="w-full">
    <!-- 部门节点 -->
    <div
      class="flex items-center justify-between px-4 py-2.5 hover:bg-accent/50 cursor-pointer group rounded-md mx-2 transition-colors duration-200"
      :style="{ paddingLeft: `${level * 16 + 16}px` }"
      @click="handleSelect"
    >
      <div class="flex items-center flex-1 min-w-0">
        <!-- 展开/收起按钮 -->
        <Collapsible
          v-if="hasChildren"
          :open="isExpanded"
          @update:open="handleToggle"
        >
          <CollapsibleTrigger as-child>
            <Button
              variant="ghost"
              size="sm"
              class="w-5 h-5 p-0 mr-2 hover:bg-transparent transition-transform duration-200"
              :class="{ 'rotate-90': isExpanded }"
              @click.stop
            >
              <ChevronRight class="w-3 h-3" />
            </Button>
          </CollapsibleTrigger>
        </Collapsible>

        <!-- 占位符 -->
        <div v-else class="w-5 mr-2" />

        <!-- 部门图标 -->
        <Building2 class="w-4 h-4 mr-3 text-muted-foreground flex-shrink-0" />

        <!-- 部门名称 -->
        <span class="text-sm font-medium truncate">{{ department.name }}</span>
      </div>

      <!-- 操作按钮 -->
      <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ml-2">
        <Button
          variant="ghost"
          size="sm"
          class="w-7 h-7 p-0 hover:bg-accent/80 rounded-md"
          @click.stop="handleCreate"
        >
          <Plus class="w-3.5 h-3.5" />
        </Button>

        <Button
          variant="ghost"
          size="sm"
          class="w-7 h-7 p-0 hover:bg-accent/80 rounded-md"
          @click.stop="handleEdit"
        >
          <Edit class="w-3.5 h-3.5" />
        </Button>

        <Button
          variant="ghost"
          size="sm"
          class="w-7 h-7 p-0 hover:bg-accent/80 rounded-md"
          @click.stop="handleDelete"
        >
          <Trash2 class="w-3.5 h-3.5" />
        </Button>
      </div>
    </div>

    <!-- 子节点 -->
    <Collapsible v-if="hasChildren" :open="isExpanded">
      <CollapsibleContent>
        <div class="w-full">
          <DepartmentTreeNode
            v-for="child of department.children"
            :key="child.id"
            :department="child"
            :level="level + 1"
            :is-selected="isSelected"
            :is-expanded="isExpanded"
            @select="handleChildSelect"
            @create="handleChildCreate"
            @edit="handleChildEdit"
            @delete="handleChildDelete"
            @toggle="handleChildToggle"
          />
        </div>
      </CollapsibleContent>
    </Collapsible>
  </div>
</template>
